<template>
	<view class="content">
		<view class="backgroud-top">
			<image src="/static/logo.png"></image>
		</view>
		<view class="content-panel">
			<uni-forms ref="form" :modelValue="formData" label-width="170rpx;">
				<uni-forms-item required label="旧密码" name="oldPassword">
					<uni-easyinput placeholder="请输入旧密码" v-model="formData.oldPassword" type="password"/>
				</uni-forms-item>
				<uni-forms-item required label="新密码" name="newPassword">
					<uni-easyinput placeholder="请输入新密码" v-model="formData.newPassword" type="password"/>
				</uni-forms-item>
				<uni-forms-item required label="确认密码" name="confirmPassword">
					<uni-easyinput placeholder="请确认新密码" v-model="formData.confirmPassword" type="password"/>
				</uni-forms-item>
				<uni-forms-item label-width="0rpx;">
					<button @click="submit">修 改</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				formData:{
					oldPassword: undefined,
					newPassword: undefined,
					confirmPassword: undefined,
					// oldPassword: '123456',
					// newPassword: '123456',
					// confirmPassword: '123456',
				},
				rules:{
					oldPassword: {
						rules: [
							{required: true,errorMessage: "不能为空"}
						]
					},
					newPassword: {
						rules: [
							{required: true,errorMessage: "不能为空"},
							{ minLength: 6, maxLength: 20, errorMessage: "长度在 6 到 20 个字符"},
						]
					},
					confirmPassword: {
						rules: [
							{required: true,errorMessage: "不能为空"},
							{ 
								validateFunction: (rule, value, data, callback) => {
									if (data.newPassword != value) {
										callback('新密码不一致')
									}
									return true
								}
							}
						]
					},
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			...mapMutations(['clearInfo']),
			submit() {
				uni.showLoading()
				this.$refs.form.validate().then(res => {
					this.$http({
						url: '/system/user/profile/updatePwd',
						method: 'put',
						params: this.formData
					}).then(res => {
						let msg = '修改成功'
						uni.showToast({
							title: msg
						})
						uni.hideLoading()
						this.clearInfo()
						uni.navigateTo({
							url:'/pages/user/login/login'
						})
					})
					
				}).catch(err => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 1300rpx;
	}

	.content-panel {
		height: 300rpx;
		width: 600rpx;
		margin-top: 50rpx;
	}
	.backgroud-top {
		height: 300rpx;
		width: 500rpx;
	
		image {
			height: 100%;
			width: 100%;
		}
	}
	button {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1296db;
		color: white;
	}
</style>
